<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托(事件委派)</title>
</head>
<body>
    <ul>
        <li>知否知否,点我应有弹窗在手</li>
        <li>知否知否,点我应有弹窗在手</li>
        <li>知否知否,点我应有弹窗在手</li>
        <li>知否知否,点我应有弹窗在手</li>
        <li>知否知否,点我应有弹窗在手</li>
    </ul>
</body>
<script>
    var ul = document.querySelector('ul')
    ul.addEventListener('click',function(e){
        // alert('知否知否,点我应有弹窗在手')
        // 通过target来指定，点击到哪个li这个li就变色
        e.target.style.backgroundColor = 'pink'
    })
</script>
<!-- 
    原理（重点）：不是给每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，
    然后利用冒泡原理影响设置每个子节点
 -->
</html>